<template>
  <div>
    <!-- 顶部导航 start -->
    <div class="topnav">
      <div class="topnav_bd w990 bc">
        <div class="topnav_left">

        </div>
        <div class="topnav_right fr">
          <!-- 用户登录时，显示内容 -->
          <ul v-if="user != null">
            <li>您好，{{user.username}}欢迎来到畅购！[<a href="/logout">退出</a>] </li>
            <li class="line">|</li>
            <li>我的订单</li>
            <li class="line">|</li>
            <li>客户服务</li>
          </ul>
          <!-- 用户没有登录，显示内容 -->
          <ul v-else >
            <li>[<a href="/Login">登录</a>] [<a href="/Register">免费注册</a>] </li>
            <li class="line">|</li>
            <li>客户服务</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 顶部导航 end -->
  </div>
</template>

<script>
import {  mapState,mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['setData'])
  },
  mounted() {
    //页面加载成功
    let loginUserStr = sessionStorage.getItem('loginUser')
    if(loginUserStr) {
      //将字符串转换对象
      let loginUser = JSON.parse( loginUserStr )
      //将数据设置到vuex
      this.setData({'key':'user','value':loginUser})
    }
  },
}
</script>

<style>

</style>
